﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>消防</title>
    <link href="~/Assets/DashBoard/css/reset.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/scanboard.css" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/animsition.css" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/jquery.shCircleLoader.css" />
    <script type="text/javascript" src="~/Assets/DashBoard/js/jquery.min.js"></script>
    <link href="~/Assets/Styles/libs/bootstrap.css" rel="stylesheet" />
    <link href="~/UIAssets/css/main.css" rel="stylesheet" />
    <link href="~/Assets/Styles/pg/part4.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Assets/DashBoard/js/jquery.shCircleLoader-min.js"></script>
    <style>
        .div_part {
            width: 48%;
            background-color: #063E60;
            height: 100px;
            margin: 2px;
            float: left;
            color: white;
            text-align: center;
            font-family: 微软雅黑;
        }

        .div_part2 {
            width: 23%;
            background-color: #063E60;
            height: 170px;
            margin: 5px;
            float: left;
            color: white;
            text-align: center;
            font-family: 微软雅黑;
            font-weight: bold;
            text-align: left;
            padding-left: 5px;
            font-size: 15px;
        }

        .echartsdiv {
            width: 20%;
            height: 70px;
            margin: 0 auto;
            float: left;
        }

        .meter-info {
            width: 45%;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap;
            display: inline-block;
        }

        .meter-head {
            color: white;
            font-weight: bold;
        }

        .meter-footer {
            color: white;
            font-weight: bold;
        }

        .meter {
            width: 200px;
            height: 120px;
            display: block;
            margin: 0 auto;
        }
        p {
            margin:0;
        }

    </style>
</head>
<body>
    <div id="loader"></div>
    <!--Top Start!-->
    <div class="scanboardWp animsition" style="overflow:hidden;">
        <div id="top">
            <div class="wp clearfix">
                <div class="left pageTit">
                    <a href="../Emergency/Index" style="background:none;font-size:30px;width:10%;"><span class="glyphicon glyphicon-home"></span></a>
                </div>
                <div class="center topLogo">
                    <a href="#">
                        <img src="~/Assets/DashBoard/images/logo11.png" />
                    </a>
                </div>
                <div class="right topBar">
                    <div class="topTime">时间加载中...</div>
                    <div class="clearfix">
                       

                    </div>
                </div>
            </div>
        </div>
        <!--Top End!-->
        <!--Main Start!-->
        <div id="main" class="wp clearfix">
            <div class="left">
                <div class="item waybill">
                    <div class="itemTit">
                        <span class="border-yellow">系统实时信息</span>
                    </div>
                    <div class="itemCon itembg">
                        <div style="height:200px;">
                            <ul style="display:block;" id="device_list">
                            </ul>
                        </div>
                    </div>
                </div>

                <!--各阶段平均用时统计-->
                <div class="item">
                    <div class="itemTit">
                        <span class="border-green">实时告警统计</span>
                    </div>
                    <div class="itemCon" style="height:200px;" id="AlarmPieChart">

                    </div>
                </div>

                <!--人员信息-->
                <div class="item">
                    <div class="itemTit">
                        <span class="border-blue">完好率</span>
                    </div>
                    <div class="itemCon itembg" style="height:200px;" id="CompeletePie">

                    </div>
                </div>
            </div>

            <div class="center">
                <div class="centerWp">
                    <!--中间大地图-->
                    <div class="mapContainer">
                        <div class="div_any" style="width:100%;height:270px;">
                            <div class="left div_any01" style="width:100%;">
                                <div class="div_any_child" style="width:100%;">
                                    <div class="div_any_title">喷淋管网末端压力</div>
                                    <p id="pressure" style="width:100%;" class="p_chart"></p>
                                </div>
                            </div>
                        </div>
                        <div class="div_any" style="width:100%;height:270px;margin-top:40px;">
                            <div class="left div_any01" style="width:100%;">
                                <div class="div_any_child" style="width:100%;margin-top:0px;">
                                    <div class="div_any_title">水泵控制柜</div>
                                    <div style="display:block;padding:40px 80px" id="ControlBox">


                                    </div>

                                </div>
                            </div>
                        </div>


                        <div class="div_any" style="width:100%;height:270px;margin-top:40px;">
                            <div class="left div_any01" style="width:100%;">
                                <div class="div_any_child" style="width:100%;height:200px;margin-top:0px;">
                                    <div class="div_any_title">水箱水位</div>
                                    <p id="histogramChart1" class="p_chart" style="width:100%;height:140px;"></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--月运单量统计图-->
                    <div class="billChart">

                    </div>
                </div>
            </div>

            <div class="right">
                <div class="item billState">
                    <div class="itemTit">
                        <span class="border-green">未处理告警列表</span>
                    </div>
                    <div class="itemCon">
                        <div class="StateBox">
                            <div class="StateTit">
                                <span>类型</span>
                                <span>设备号</span>
                                <span>时间</span>
                            </div>
                            <div id="FontScroll" style="height:420px;color:red;">
                                <ul id="errorlist">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--总计运单数-->
                <div class="item total itembg">
                    <div class="itemTit">
                        <span class="border-yellow">完好率趋势表</span>
                    </div>
                    <div class="itemCon" id="myChart1">

                    </div>
                </div>
            </div>
        </div>
        <!--Main End!-->
    </div>

    <div class="filterbg"></div>
    <div class="popup">
        <a href="javascript:;" class="popupClose"></a>
        <div class="summary">
            <div class="summaryTop">
                <div id="summaryPie1" class="summaryPie"></div>
                <div id="summaryPie2" class="summaryPie"></div>
                <div id="summaryPie3" class="summaryPie"></div>
            </div>
            <div class="summaryBottom">
                <div class="summaryBar">
                    <div class="summaryTit">
                        <img src="images/tit1.png">
                    </div>
                    <div id="summaryBar"></div>
                </div>

                <div class="summaryLine">
                    <div class="summaryTit">
                        <img src="images/tit2.png">
                    </div>
                    <div id="summaryLine"></div>
                </div>
            </div>
        </div>
    </div>


    <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
</body>
<script src="~/UIAssets/plugins/gauge/gauge.min.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/fontscroll.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.animsition.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/jquery.nicescroll.js"></script>
<script type="text/javascript" src="~/Assets/DashBoard/js/echarts.min.js"></script>
@*<script type="text/javascript" src="~/Assets/DashBoard/js/scanboard.js"></script>*@
<script type="text/javascript">
    $(".animsition").animsition({
        inClass: 'fade-in',
        outClass: 'fade-out',
        inDuration: 300,
        outDuration: 1000,
        // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
        loading: false,
        loadingParentElement: 'body', //animsition wrapper element
        loadingClass: 'animsition-loading',
        unSupportCss: ['animation-duration',
            '-webkit-animation-duration',
            '-o-animation-duration'
        ],
        overlay: false,
        overlayClass: 'animsition-overlay-slide',
        overlayParentElement: 'body'
    });
    LoadData();
    
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond);
        $('.topTime').html(nowTime);
    };
    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }
    setInterval(getTime, 1000);
    function LoadData() {
        setTimeout(function () {
            GetDeviceList();
            InitAlarmChart();
            compeltePercent();
            InitWaterLevel();
            InitPressure();
            WaterControlBox();
        }, 2000);
        setInterval(function () {
            GetDeviceList();
            InitAlarmChart();
            compeltePercent();
            InitWaterLevel();
            InitPressure();
            WaterControlBox();
        }, 60000);
    }

    function WaterControlBox() {
        $.ajax({
            type: "post",
            url: "../Emergency/Getpumpdetail",
            dataType: "json",
            success: function (data) {
                if (data != null && data != "") {
                    var htmlcontent = "";
                    var datalist = JSON.parse(data);
                    for (var i = 0; i < datalist.length; i++) {
                        htmlcontent += '<div class="div_part2">';
                        var detail = datalist[i].data;
                        htmlcontent += '<p>设备名称：' + datalist[i].name + '</p>';
                        for (var j = 0; j < detail.length; j++) {
                            var text = "";
                            if (detail[j].value == "正常") {
                                text = "<b style='color:green;'>正常</b>";
                            }
                            else if (detail[j].value == "故障") {
                                text = "<b style='color:red;'>故障</b>";
                            }
                            else {
                                text = detail[j].value;
                            }
                            htmlcontent += "  <p>" + detail[j].key + "：" + text + "</p>";
                        }
                        htmlcontent += ' </div>';
                    }
                    $("#ControlBox").html(htmlcontent);
                }
            }
        });
    }

    function GetDeviceList() {
        $.ajax({
            type: "post",
            url: "../Emergency/Getpgmcount",
            dataType: "json",
            success: function (data) {
                if (data != null && data != "") {
                    var htmlcontent = "";
                    var datalist = JSON.parse(data);
                    if (datalist.length == 0)
                        return false;
                    for (var i = 0; i < 4; i++) {
                        htmlcontent += ' <li class="div_part">';
                        htmlcontent += ' <p class="d_title" style="font-weight:bold;font-size:17px;color:#25f3e6;">' + datalist[i].name + '</p>';
                        htmlcontent += ' <p class="d_detail" style="font-size:22px; font-weight:bold;margin:20px auto;"><font style="color:green;font-size:22px;">' + datalist[i].online + '</font><font style="color:#25f3e6;font-size:22px;">/' + datalist[i].total + '</font></p>';
                        htmlcontent += ' </li>';
                    }
                    $("#device_list").html(htmlcontent);
                }
            }
        });
    }

    function InitAlarmChart() {
        $.ajax({
            type: "post",
            url: "../Emergency/Getalarmreal",
            dataType: "json",
            success: function (datas) {
                if (datas != null && datas != "") {
                    var namelist = [];
                    var datalist = JSON.parse(datas);
                    var dataArray = [];
                    for (var i = 0; i < datalist.length; i++) {
                        var obj = {};
                        obj.name = datalist[i].name;
                        obj.value = datalist[i].times;
                        dataArray.push(obj);
                        namelist.push(datalist[i].name);
                    }
                    var option = {
                        title: {
                            text: '',
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: namelist,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        series: [
                            {
                                name: '',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: dataArray,
                                itemStyle: {
                                    normal: {
                                        // 随机显示
                                        //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                        // 定制显示（按顺序）
                                        color: function (params) {
                                            var colorList = ['#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#749F83', '#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#749F83', '#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83',];
                                            return colorList[params.dataIndex]
                                        }
                                    },
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    var myChart1 = echarts.init(document.getElementById('AlarmPieChart'));
                    myChart1.setOption(option);
                }
            }
        });
    }

    function compeltePercent() {
        $.ajax({
            type: "post",
            url: "../Emergency/Getdeviceerror",
            dataType: "json",
            success: function (datas) {
                if (datas != null && datas != "") {
                    var namelist = [];
                    var datalist = JSON.parse(datas).num;
                    var dataArray = [];
                    for (var i = 0; i < datalist.length; i++) {
                        var obj = {};
                        obj.name = datalist[i].name;
                        obj.value = datalist[i].times;
                        dataArray.push(obj);
                        namelist.push(datalist[i].name);
                    }
                    var option = {
                        title: {
                            text: '',
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: namelist,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        series: [
                            {
                                name: '',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: dataArray,
                                itemStyle: {
                                    normal: {
                                        // 随机显示
                                        //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                        // 定制显示（按顺序）
                                        color: function (params) {
                                            var colorList = ['#61A0A8', '#E98F6F', '#2F4554', '#C23531', '#749F83', '#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#749F83', '#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#749F83', '#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83',];
                                            return colorList[params.dataIndex]
                                        }
                                    },
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    var myChart1 = echarts.init(document.getElementById('CompeletePie'));
                    myChart1.setOption(option);

                    //报错列表
                    var htmlcontent = "";
                    var errorlist = JSON.parse(datas).event;
                    for (var i = 0; i < errorlist.length; i++) {
                        htmlcontent += '<li style="color:red;"><div class="fontInner clearfix">';
                        htmlcontent += '<span style="color:red;">' + errorlist[i].type + '</span><span style="color:red;">' + errorlist[i].deviceNo + '</span><span style="color:red;">' + errorlist[i].time + '</span></div>  </li>';
                    }
                    $("#errorlist").html(htmlcontent);
                }
            }
        });

    }

    function InitWaterLevel() {
        $.ajax({
            type: "post",
            url: "../Emergency/Gettankdetail",
            dataType: "json",
            success: function (datas) {
                if (datas != null && datas != "") {
                    var datalist = JSON.parse(datas);
                    var htmlcontent = "";
                    for (var i = 0; i < datalist.length; i++) {
                        htmlcontent += '<div class="meter-info text-center"> <div class="meter-head">  <small>' + datalist[i].pressure + ' m</small>    </div>';
                        htmlcontent += '<div class="meter meter-striped"><div class="meter-bar meter-bar-info active" role="meterbar" style="height:'+ datalist[i].pressure*20+'%"></div> </div>';
                        htmlcontent += ' <div class="meter-footer"><small>'+datalist[i].name+'</small></div> </div></div>';
                    }

                    $("#histogramChart1").html(htmlcontent);
                }
            }
        });
    }
    function InitWaterLevel2() {
        var myColor = ['#1089E7', '#1089E7'];
        var WaterLevel = echarts.init(document.getElementById('histogramChart1'));
        var option = {};
        $.ajax({
            type: "post",
            url: "../Emergency/Gettankdetail",
            dataType: "json",
            success: function (datas) {
                if (datas != null && datas != "") {
                    var datalist = JSON.parse(datas);
                    var dataArray = [];
                    var nameArray = [];
                    for (var i = 0; i < datalist.length; i++) {
                        dataArray.push(datalist[i].pressure);
                        nameArray.push(datalist[i].name);
                    }
                    option = {
                        grid: {
                            top: '20%',
                            left: '32%'
                        },
                        xAxis: {
                            show: false
                        },
                        yAxis: [{
                            show: true,
                            data: nameArray,
                            inverse: true,
                            axisLine: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#fff',
                                fontSize: 17,
                                formatter: (value, index) => {
                                    return [
                                        `{lg|${index + 1}}  ` + '{title|' + value + '} '
                                    ].join('\n')
                                },
                                rich: {
                                    lg: {
                                        backgroundColor: '#339911',
                                        color: '#fff',
                                        borderRadius: 15,
                                        // padding: 5,
                                        align: 'center',
                                        width: 15,
                                        height: 15
                                    },
                                }
                            },


                        }, {
                            show: true,
                            inverse: true,
                            data: dataArray,
                            axisLabel: {
                                textStyle: {
                                    fontSize: 20,
                                    color: '#fff',
                                },
                            },
                            axisLine: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },

                        }],
                        series: [{
                            name: '条',
                            type: 'bar',
                            yAxisIndex: 0,
                            data: dataArray,
                            barWidth: 20,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 20,
                                    color: function (params) {
                                        var num = myColor.length;
                                        return myColor[params.dataIndex % num]
                                    },
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside',
                                    formatter: '{c}米'
                                }
                            },
                        }]
                    };
                    WaterLevel.setOption(option);
                }
            }
        });

    }


    function InitPressure() {
        
        $.ajax({
            type: "post",
            url: "../Emergency/Getpgmdetail",
            dataType: "json",
            success: function (datas) {
                if (datas != null && datas != "") {
                    var datalist = JSON.parse(datas);
                    if (datalist.length == 0)
                        return false;
                    $("#pressure").html("");
                    for (var i = 0; i < 10; i++) {
                        var divclass = "echartsdiv";
                        var id = "repairPartName" + i;
                        var textId = "gauge-text" + i;
                        var htmlcontent = '<div class="panel-body widget-gauge" style=" width: 20%;height: 120px; margin: 0 auto;float:left;">';
                        htmlcontent += '<canvas width="160" height="70" id="' + id + '" class=""></canvas><div class="goal-wrapper" style="margin-top:0px;"><span class="gauge-value pull-left" ></span>';
                        htmlcontent += '<span id="' + textId + '" class="gauge-value pull-align">0</span><br/><span class="gauge-value pull-align">' + datalist[i].location + '</span></div> </div>';
                        
                        $("#pressure").append(htmlcontent);
                        var target = document.getElementById(id);
                        var num = datalist[i].pressure / 1000;
                        var color = "#1089E7";
                        if (num < 0.01) {
                            color = "red";
                        }
                        else if (num >= 1.6) {
                            color = "yellow";
                        }
                        var opts = {
                            lines: 10, // The number of lines to draw
                            angle: 0, // The length of each line
                            lineWidth: 0.4, // The line thickness
                            pointer: {
                                length: 0.75, // The radius of the inner circle
                                strokeWidth: 0.042, // The rotation offset
                                color: '#1D212A' // Fill color
                            },
                            limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
                            colorStart: '#1ABC9C',   // Colors
                            colorStop: color,    // just experiment with them
                            strokeColor: 'grey',   // to see which ones work best for you
                            generateGradient: true
                        };
                        var gauge = new Gauge(target).setOptions(opts);
                        gauge.maxValue = 3; // set max gauge value
                        gauge.animationSpeed = 32; // set animation speed (32 is default value)
                        $("#" + textId).html(num + " MPa");

                        gauge.set(num);
                    }
                }
            }
        });


    }
</script>
</html>
